<template>
    <div>
        <div class="user-info">
            <div class="user-picture">
                <div class="pic" v-if="userStore.userinfoL?.avatar_url">
                    <img :src="userStore.userinfoL?.avatar_url" class="ele" />
                </div>
                <el-icon v-else size="50" color="#fff"><User /></el-icon>
            </div>
            <div class="fullname">{{ userStore.userinfoL?.first_name }} {{ userStore.userinfoL?.last_name }}</div>
            <el-button color="#435764">
                <el-icon size="16"><Comment /></el-icon>
                {{ $t('user.profile.message') }}
            </el-button>
        </div>
        <div class="profile-tree">
            <div class="node-category">
                <h3 class="lead">{{ $t('user.profile.detail_title') }}</h3>
                <ul>
                    <li class="edit-profile">
                        <RouterLink to="/console/user/edit">{{ $t('user.profile.edit_profile') }}</RouterLink>
                    </li>
                    <li class="content-node">
                        <dl>
                            <dt>{{ $t('user.profile.email') }}</dt>
                            <dd>
                                <a :href="`mailto:${userStore.userinfoL?.email}`">{{ userStore.userinfoL?.email }}</a>
                                ({{ $t('user.profile.email_hidden_tip') }})
                            </dd>
                        </dl>
                    </li>
                    <li class="content-node">
                        <dl>
                            <dt>{{ $t('user.profile.code') }}</dt>
                            <dd>{{ userStore.userinfoL?.code }}</dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="node-category">
                <h3 class="lead">{{ $t('user.profile.privacy_title') }}</h3>
                <ul>
                    <li>
                        <RouterLink to="/console/">{{ $t('user.profile.privacy_policy') }}</RouterLink>
                    </li>
                </ul>
            </div>
            <div class="node-category" v-loading="courseLoading">
                <h3 class="lead">{{ $t('user.profile.course_title') }}</h3>
                <ul>
                    <li class="content-node">
                        <dl>
                            <dt>{{ $t('user.profile.course_intro') }}</dt>
                            <dd v-for="course in courseList" :key="course.id">
                                <RouterLink :to="`/console/course/${course.id}`">{{ course.name }}</RouterLink>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="node-category">
                <h3 class="lead">{{ $t('user.profile.other_title') }}</h3>
                <ul>
                    <li class="content-node">
                        <RouterLink to="/console/">{{ $t('user.profile.forum_posts') }}</RouterLink>
                    </li>
                    <li class="content-node">
                        <RouterLink to="/console/">{{ $t('user.profile.forum_topics') }}</RouterLink>
                    </li>
                    <li class="content-node">
                        <RouterLink to="/console/">{{ $t('user.profile.study_plan') }}</RouterLink>
                    </li>
                </ul>
            </div>
            <div class="node-category">
                <h3 class="lead">{{ $t('user.profile.report_title') }}</h3>
                <ul>
                    <li class="content-node">
                        <RouterLink to="/console/">{{ $t('user.profile.browser_history') }}</RouterLink>
                    </li>
                    <li class="content-node">
                        <RouterLink to="/console/">{{ $t('user.profile.grade_overview') }}</RouterLink>
                    </li>
                </ul>
            </div>
            <div class="node-category">
                <h3 class="lead">{{ $t('user.profile.login_title') }}</h3>
                <ul>
                    <li class="content-node">
                        <dl>
                            <dt>{{ $t('user.profile.first_login') }}</dt>
                            <dd v-if="userStore.userinfoL">{{ formatLoginTime(userStore.userinfoL.last_login_time) }}</dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'

import type { CourseItem } from '@/types/course'
import CourseService from '@/api/course'

import { formatLoginTime } from '@/utils/global'

const userStore = useUserStore()
const courseList = ref<CourseItem[]>([])
const courseLoading = ref(false)
function getCourseList() {
    courseLoading.value = true
    CourseService.listToPersonal()
        .then(res => {
            courseList.value = res
        })
        .finally(() => {
            courseLoading.value = false
        })
}

onMounted(() => {
    getCourseList()
})
</script>

<style lang="less" scoped>
@import '@/assets/styles/variable.less';
.user-info {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;

    .user-picture {
        border-radius: 50%;
        width: 84px;
        height: 84px;
        background-color: #e6e6e6;
        overflow: hidden;

        display: flex;
        align-items: center;
        justify-content: center;

        .pic {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .fullname {
        font-weight: 400;
        color: #000;
        font-size: 26px;
        line-height: 1.2;
    }
}

.profile-tree {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .node-category {
        margin-bottom: 15px;
        border-radius: 2px;
        padding: 15px;
        border: 1px solid #e3e3e3;
        background-color: #fcfcfc;
        width: calc(50% - 10px);
        @media screen and (max-width: @lPhone) {
            width: calc(100%);
            margin-bottom: 0px;
        }
        .lead {
            margin-bottom: 18px;
            border-radius: 2px;
            border-left: 2px solid #f06423;
            padding: 4px 15px;
            font-size: 18px;
            font-weight: 400;
            background-color: rgba(0, 0, 0, 0.05);
            background-image: url(@/assets/img/strip2_black8.svg);
        }

        ul {
            li {
                margin-bottom: 5px;
                color: #4c4c4c;
                font-size: 15px;
                line-height: 1.666;

                a {
                    color: #4c4c4c;
                    transition: color 0.35s ease-in-out;

                    &:hover {
                        color: #f06423;
                    }
                }

                &.edit-profile {
                    text-align: right;
                }

                &.content-node {
                    dl {
                        margin-bottom: 15px;

                        dt {
                            color: #000;
                        }
                    }
                }
            }
        }
    }
}
</style>
